<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后台管理首页</title>
    <link rel="shortcut icon" href="/imgs/head.ico"/>
    <!--引入vue.js库-->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> -->
    <script src="/js/vue.js"></script>
    <!-- element-ui引入样式 展示数据的-->
    <link rel="stylesheet" href="/css/index.css">
    <!-- element-ui引入组件库 -->
    <script src="/js/index.js"></script>
    <!--引入axios库  从后端获取数据-->
    <!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->
    <script src="/js/axios.min.js"></script>
    <style>
        .el-header{
            width: 100%;
            color: #333;
            line-height: 36px;
            font: normal 30px "LianMengQiYiLuShuaiZhengRuiHeiTi-2" ;
        }
        @font-face {
            font-family: "LianMengQiYiLuShuaiZhengRuiHeiTi-2";
            src:url("../../css/LianMengQiYiLuShuaiZhengRuiHeiTi-2.ttf");

        }
        @font-face {
            font-family: "A023";
            src:url("../../css/No.023-Sounso-Undividedad-2.ttf");
        }
        .logos{
            position: absolute;
            top: 15px;
            left: 80px;
            color: #2fb9d4;
            font: normal 30px "LianMengQiYiLuShuaiZhengRuiHeiTi-2" ;
        }
        .el-aside {
            background-color: #fff;
            padding-left: 0;
            text-align: left;
            line-height: 36px;
            margin-left: -10px;
            font: normal 30px "LianMengQiYiLuShuaiZhengRuiHeiTi-2" ;
        }
        .el-main {
            background-color: #fff;
            color: #333;
            padding: 0;
            text-align: left;
            line-height: 36px;
            font: normal 30px "LianMengQiYiLuShuaiZhengRuiHeiTi-2" ;
        }

        body > .el-container {
            margin-bottom: 40px;
            background-color: #fff;
        }

        .el-container:nth-child(5) .el-aside,
        .el-container:nth-child(6) .el-aside {
            line-height: 36px;
        }

        .el-container:nth-child(7) .el-aside {
            line-height: 36px;
        }
        .footer {
            position: fixed;
            left: 0px;
            bottom: 0px;
            width: 100%;
            height: 15px;
            line-height: 10px;
            text-align: center;
            color:#2fb9d4;
            background-color: #ffffff;
            z-index: 9999;
            font: normal  3px "A023" ;
        }
        .el-submenu.is-opened>.el-submenu__title .el-submenu__icon-arrow{
            display: none;
        }
        .el-submenu>.el-submenu__title .el-submenu__icon-arrow{
            display: none;
        }
    </style>
</head>
<body>
<!--vue必须绑定根标签-->
<div id="app">
    <el-container>
        <el-header style="background-color: #fff;width: 100% ;">
            <el-row  >
                <el-col :span="6"><img style="height: 60px;
                                position: absolute;
                                top: -3px;
                                left: 10px;
                                width: 40px;" src="../../imgs/logo.png" alt="">
                    <span class="logos">趣哪儿后台管理</span><div class="grid-content bg-purple-light">&nbsp;</div></el-col>
                <el-col :span="6"><div class="grid-content bg-purple-light">&nbsp;</div></el-col>
                <el-col :span="7"><div class="grid-content bg-purple" style="color: #2fb9d4;margin-top:17px; font-size: 17px;margin-left: 50px">{{currentDateTime}}&nbsp;{{week}}</div></el-col>
                <el-col :span="5"><div class="grid-content bg-purple-light" style="float:right">
                    <el-menu
                            :default-active="activeIndex2"
                            class="el-menu-demo"
                            mode="horizontal"
                            background-color="#fff"
                            text-color="#2fb9d4"
                            active-text-color="#ffd04b">
                        <el-submenu index="2">
                            <template slot="title">{{userInfo.loginName}}-{{userInfo.userName}}</template>
                            <el-menu-item index="2-1" @click="individual">个人中心</el-menu-item>
                            <el-menu-item  index="2-2" @click="updateP">修改密码</el-menu-item>
                            <el-menu-item index="2-3" @click="logout">退出</el-menu-item>
                        </el-submenu>
                        <el-menu-item index="4"><el-image style="width: 50px; height: 50px" :src="userInfo.avatar"></el-image>
                        </el-menu-item>
                    </el-menu>
                </div></el-col>
            </el-row>
        </el-header>
        <el-container >
            <el-aside  width="200px">
                <el-menu
                        default-active="2"
                        class="el-menu-vertical-demo"
                        @open="handleOpen"
                        @close="handleClose"
                        background-color="#2fb9d4"
                        text-color="#fff"
                        text-align="left"
                        active-text-color="#ffd04b">
                    <el-submenu :index="navMenu.id+''"  v-for="navMenu in data">
                        <template slot="title">
                            <i :class="navMenu.icon" style="color: #FFFFFF"></i>
                            <span>{{navMenu.label}}</span>
                        </template>
                        <el-submenu :index="cnavMenu.id+''"   v-for="cnavMenu in navMenu.children">
                            <template slot="title" :url="cnavMenu.url" >
                                <i :class="cnavMenu.icon" style="color:black"></i>
                                <span  style="color: black"  @click="cclick(cnavMenu.label,cnavMenu.url)">{{cnavMenu.label}}</span>
                            </template>
                        </el-submenu>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <el-container>
                <el-main>
                    <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab" >
                        <el-tab-pane v-for="(item, index) in editableTabs" :key="item.name" :label="item.title" :name="item.name">
                            <iframe id="iframe" :src="item.url" style="width: 100% ;height: 1000px"  frameborder="0" scrolling="auto"></iframe>
                        </el-tab-pane>
                    </el-tabs>
                </el-main>
            </el-container>
        </el-container>
    </el-container>
</div>
<div class="footer">Technical support: 164-14</div>
<script>
    //js代码
    var vue = new Vue({
        el: "#app",
        data() { //存放使用的所有属性数据
            return {
                //和页签页有关属性开始
                editableTabsValue: '1',
                editableTabs: [{title: '默认页', name: '1', url:'https://travel-1138381-pic10.websiteonline.cn/upload/bn2.jpg'} ],
                tabIndex: 1,
                //和页签页有关属性结束
                //el-tree 的数据
                //方便编写表单校验
                data: [],
                defaultProps: {
                    parentId: 'parentId',
                    icon:'icon',
                    children: 'children',
                    label: 'label'
                },
                //头部导航相关属性
                currentDateTime:'',//获取当前时间
                week:'',//星期几
                activeIndex2:'1', //导航栏默认激活
                userInfo:{} //登录人信息对象
            }
        },
        created: function () {//页面初始化时，需要执行的业务可以放入该方法
            var _this = this;
            // alert(111);
            //复制 axios官网代码
            //初始化查询左侧树
            axios.get('/menu/queryTreeNodeByUserId')  //指定请求的url及参数  get
                .then(function (response) {  //正确返回对象的处理
                    //JSON.stringify   把json转换为json字符串，方便查看
                    console.log(JSON.stringify(response));
                    //直接使用this 会指 axios对象  错误
                    // this.tableData
                    //判断返回值是否正确
                    if(response.data.code==200){
                        _this.data = response.data.data;
                    }
                })
            //获取用户登录后的信息
            axios.get('/l/getLoginSession')
                .then(function (response) {
                    if(response.data.code==200){
                        _this.userInfo=response.data.data;
                    }
                });
            // 调用两个方法，给头部导航栏gettime和week赋值
            this.currentTime();
            this.getWeek();
        },
        methods: { //存放所有使用的方法（函数）
            //绑定点击事件
            handleNodeClick(data) {
                console.log(data);
                console.log(JSON.stringify(data));
                if(data.url!=null&&data.url!=''&&data.url!='null'&&data.url!='undefined'){
                    //当点击左侧菜单时，添加页签
                    this.addTab(data.label,data.url);
                }
            },
            cclick(t1,t){
                if(t!=null&&t!=''&&t!='null'&&t!='undefined'){
                    //当点击左侧菜单时，添加页签
                    this.addTab(t1,t);
                }
            },
            //添加页签
            addTab(targetName,url) {
                let newTabName = ++this.tabIndex + '';//让tabIndex加1
                //获取所有的标签页
                let tabs = this.editableTabs;
                //定义是否已经标签变量
                var  isHaveTab = false;
                //循环所有页签页
                tabs.forEach((tab, index) => {
                    //如果为true 说明当前点击节点（部门管理），已经存在标签页
                    if(targetName === tab.title){// 判断是否相等  1=='1' 值相等  true   1==='1'  false 类型和值都香港等
                        isHaveTab = true;
                        newTabName =tab.name;
                    }
                });
                //isHaveTab  集合中没有的时候，添加
                if(!isHaveTab) {
                    this.editableTabs.push({//向数组中添加数据
                        title: targetName,
                        name: newTabName,
                        url: url
                    });
                }
                //让它高亮
                this.editableTabsValue = newTabName;
            },
            //删除页签
            removeTab(targetName) {
                let tabs = this.editableTabs;
                let activeName = this.editableTabsValue;
                if (activeName === targetName) {
                    tabs.forEach((tab, index) => {
                        if (tab.name === targetName) {
                            let nextTab = tabs[index + 1] || tabs[index - 1];
                            if (nextTab) {
                                activeName = nextTab.name;
                            }
                        }
                    });
                }

                this.editableTabsValue = activeName;
                this.editableTabs = tabs.filter(tab => tab.name !== targetName);
            },
            //头部导航获取当前时间
            getTime:function(){
                //获取当前时间
                let currentDate  =new Date();
                //获取到4位的年 2022
                let yy = currentDate.getFullYear();
                let mm = currentDate.getMonth()+1;
                let dd = currentDate.getDate();
                let hh = currentDate.getHours();
                //currentDate.getMinutes()<10    0-9   ->  00 - 09
                let mf = currentDate.getMinutes()<10 ? '0'+currentDate.getMinutes() : currentDate.getMinutes();
                let ss = currentDate.getSeconds()<10 ? '0'+currentDate.getSeconds() : currentDate.getSeconds();
                this.currentDateTime = yy+'-'+mm+'-'+dd+' '+hh+':'+mf+':'+ss;
            },
            //每隔0.5秒调用getTime属性
            currentTime(){
                //setInterval(param1,param2)  每个param2间隔时间调回用方法param1
                setInterval(this.getTime,500)
            },
            //获取星期几
            getWeek(){
                //java String   "abc".charAt(1)  返回某一个字符串"abc"1位置上的字符
                //.getDay() 获取星期几的数字 0-6    周日是第1天
                //.getDate() 获取档期日期的每月第几天   2020-03-12  12
                console.log("星期"+new Date().getDay());
                //charAt 返回指定字符串位置上的值  "abcdef".charAt(0) = a     "abcdef".charAt(2) = c
                this.week='星期'+"日一二三四五六".charAt(new Date().getDay());
            },
            //用户退出方法
            logout() {
                // logout 不用自己写方法  调用shiro退出配置  调用配置时 它会调用LogoutFilter 做销毁session操作
                axios.post('/l/logout')  //指定请求的url及参数  get
                    .then(function (response) {  //正确返回对象的处理
                        location.href = "/html/front/login.html";
                    })
            },
            // 跳转个人中心
            individual(){
                location.href="/html/back/individual.html";
            },
            //修改密码
            updateP(){
                location.href="/html/back/updatePw.html";
            },
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
        }
    })
</script>
</body>
</html>